<template>
	<view class="body-bar">
		<text class="big-title">
			注册医生账号
		</text>
		<text
			style="font-size: 28rpx;color:#999;font-weight: 400;line-height: 28rpx;margin-bottom: 90rpx;">欢迎使用家医</text>
		<text class="title">手机号码</text>
		<view :class="{'action':nowIndex==0,'input-bar':true}" @click="nowIndex=0" style="margin-bottom: 40rpx;">
			<text
				style="font-weight: 400;font-size: 28rpx;color: #999;line-height: 88rpx;display: inline-block;">+86</text>
			<view style="height: 36rpx;width: 4rpx;background-color: #ccc;margin-left: 28rpx;"></view>
			<input type="text" placeholder="请输入手机号码" v-model="loginInfo.phone" />
		</view>
		<text class="title">验证码</text>
		<view class="input-bar" :class="{'action':nowIndex==1,'input-bar':true}" @click="nowIndex=1"
			style="justify-content: space-between;margin-bottom: 40rpx;">
			<input type="text" placeholder="请输入验证码" />
			<text style="font-size: 24rpx;color: #2984F8;font-weight: 400;">获取验证码</text>
		</view>
		<text class="title">密码</text>
		<view class="input-bar" :class="{'action':nowIndex==2,'input-bar':true}" @click="nowIndex=2"
			style="justify-content: space-between;">
			<input type="text" placeholder="请输入密码" v-model="loginInfo.password" />
		</view>
		<view class="deal-bar">

			<view style="display: flex; align-items: center;display:inline-block;">
				<checkbox-group @change="check">
					<label>
						<checkbox value="cb" color="#007aff" style="transform:scale(0.7)" />
						<text style="font-size:26rpx;color:#c9c9c9;font-weight: 400;">我已阅读并同意<text
								style="font-size:26rpx;color:#1877F2">《用户隐私政策》</text>
						</text>
					</label>
				</checkbox-group>
			</view>

		</view>
		<button class="login-button" @click="register">注册</button>
		<text class="toLogin" @click='toLogin'>已有账号，去登陆</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		registerApi
	} from '../../api/login';
	import {
		error
	} from '../../uni_modules/uview-plus';

	const nowIndex = ref(-1)
	const dealData = ref([])
	const loginInfo = ref({
		phone: '',
		password: ''
	})

	// 协议

	function check(e) {
		dealData.value = e.detail.value
	}

	// 跳转登录
	function toLogin() {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	// 注册
	function register() {
		if (!dealData.value.length) {
			uni.showToast({
				title: '阅读并勾选协议',
				duration: 3000,
				icon: 'error'
			});
		} else {
			registerApi(loginInfo.value)
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '注册成功',
							duration: 2000
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'error'
						});
					}
				})
		}

	}
</script>

<style scoped>
	.body-bar {
		width: calc(750rpx - 64rpx);
		height: 100vh;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.big-title {
		font-size: 48rpx;
		font-weight: 500;
		color: #333;
		line-height: 48rpx;
		margin-top: 32rpx;
		margin-bottom: 28rpx;
	}

	.title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		line-height: 28rpx;
		margin-bottom: 28rpx;
		text-align: left;
	}

	.input-bar {
		background-color: #f1f7fb;
		height: 88rpx;
		width: 670rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.input-bar input {
		height: 80rpx;
		display: block;
		border: none;
		outline: none;
		/* padding-left: 28rpx; */
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
	}

	.action {
		background-color: #fff;
		border: 1px solid #2984F8;
	}

	.deal-bar {
		width: calc(750rpx - 64rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 0;
	}

	.login-button {
		width: 670rpx;
		height: 88rpx;
		background-color: #2984F8;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		margin: 0;
		margin-bottom: 40rpx;

	}

	.check-bar {
		font-size: 28rpx;
		color: #2984F8;
		display: flex;
		justify-content: space-between;
	}

	.toLogin {
		display: inline-block;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 400;
		color: #2984F8;
	}
</style>